import React from 'react'
import {Table,Avatar,Icon,Row,Col,Button} from 'antd'
import moment from 'moment';
import { connect } from 'dva'
import {Link} from 'dva/router'
import styles from './index.css'

class ArticleTable extends React.Component{
    render(){
        const {allCount,articleList} = this.props.articleList;
        const {changePage,handleIcon,submit,handleDelete,handleOff} = this.props;
        const columns = [{
            title: '序号',
            dataIndex: 'orderBy',
            width:'6%'
        }, {
            title: '置顶',
            dataIndex: 'isTop',
            width:'6%',
            render:(text,record)=>
                <div>
                    {
                        record.isTop == 0 ?
                        <Icon type="like" theme="outlined" className={styles.icon} onClick={()=>handleIcon(record.id)}/>
                        :
                        <Icon type="like" theme="twoTone" className={styles.iconTone} onClick={()=>handleIcon(record.id)}/>
                    }
                </div>
        }, {
            title: '标题图',
            dataIndex: 'pic',
            width:'15%',
            render:(pic)=>
                <div>
                    <Avatar src={pic} style={{width:'120px',height:'70px'}}></Avatar>
                </div>
        },{
            title: '标题',
            dataIndex: 'title',
            width:'25%',
            render:(text,record)=>
                <Link to={`/bshrecipes/articleDetail/${record.id}`}>
                    <span className={styles.title}>{record.title}</span>
                </Link>
        },{
            title: '发布时间',
            dataIndex: 'rdate',
            width:'15%'
        },{
            title: '发布状态',
            dataIndex: 'status',
            width:'10%',
            render:(status)=>{
                switch (status){
                    case 1:
                        return '草稿'
                        break;
                    case 2:
                        return '发布中'
                        break;
                    case 3:
                        return '已下架'
                        break;
                }
            }
        },{
            title: '操作',
            dataIndex: 'opertion',
            width:'15%',
            render:(text,record)=>
                <div>
                    {
                        (record.status == 1) ? 
                        <div>
                            <Button type="primary" onClick={()=>submit(record.id)}>发布</Button>
                            <Button onClick={() => handleDelete(record.id)} className={styles.record}>删除</Button>
                        </div>
                        : (record.status == 2) ? 
                        <Button type='primary' onClick={()=>handleOff(record.id)}>下架</Button> 
                        : (record.status == 3) ? 
                        <Button onClick={()=>handleDelete(record.id)}>删除</Button> : ''
                    }
                </div>
                
        }];
        return(
            <div>
                <Table 
                    rowKey='id'
                    columns={columns}
                    bordered={true}
                    dataSource={articleList}
                    pagination={{
                        total: allCount,
                        showTotal: total => `共有${allCount}条数据`,
                        onChange: changePage
                    }}
                />
            </div>
        )
    }
}
export default connect(({articleList})=>({articleList}))(ArticleTable)